<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="customer_group_detail">
        <div class="header">
            <div class="back">返回</div>
            <div class="type_select_wrapper">客户群详情</div>
        </div>
        <div class="container">
            <div class="header_wrapper">
                <div class="header_left_wrapper">
                    <div class="img_wrapper">
                        <img src="../../images/test.JPG">
                    </div>
                    <div class="text_wrapper">
                        <div class="group_name">群聊</div>
                        <div class="group_detail">
                            <span class="grouper">群主：刘毅华</span>
                            <span class="units">|</span>
                            <span class="creat_time">创建时间：2020-01-16 17:29</span>
                            <span class="units">|</span>
                            <span class="group_notice">群公告：未设置</span>
                        </div>
                    </div>
                </div>
                <div class="contact_type">
                    <div class="type_item group_qrcode">
                        <i class="iconfont icon-Group-"></i>
                        <span>群二维码</span>
                    </div>
                </div>
            </div>
            <div class="center_wrapper">群成员(1人)</div>
            <div class="table_wrapper">
                <div class="table_screen">
                    <div class="screen_item">
                        <span class="text">搜索：</span>
                        <input class="layui-input" id="search_input" type="text">
                    </div>
                </div>
                <table class="layui-table group_member_table" style="table-layout:fixed">
                    <thead>
                        <tr>
                            <th class="group_name">群成员</th>
                            <th>群昵称</th>
                            <th>进群时间</th>
                            <th>进群方式</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="group_name">刘毅华</td>
                            <td>刘毅华</td>
                            <td>2020-01-16 17:29</td>
                            <td>由成员邀请入群</td>
                        </tr>
                        <tr>
                            <td class="group_name">叶铠齐</td>
                            <td>刘毅华</td>
                            <td>2020-01-16 17:29</td>
                            <td>由成员邀请入群</td>
                        </tr>
                        <tr>
                            <td class="group_name">赵虹蕊</td>
                            <td>刘毅华</td>
                            <td>2020-01-16 17:29</td>
                            <td>由成员邀请入群</td>
                        </tr>
                    </tbody>
                </table>
                <div class="paging_style" id="paging"></div>
            </div>
        </div>
    </div>

    <!-- 群二维码模态框 -->
    <div class="modal fade" id="group_qrcode_modal" tabindex="-1" role="dialog"
        aria-labelledby="group_qrcode_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="group_qrcode_modal_label">群二维码</h4>
                </div>
                <div class="modal-body">
                    <div class="group_avatar">
                        <img src="../../images/test.JPG">
                    </div>
                    <div class="group_name">群聊</div>
                    <div class="group_qrcode">
                        <img src="../../images/qrcode.jpg">
                    </div>
                    <div class="group_tips">二维码7天内（02月26日前）有效，再次获取将更新，并将以群主身份邀请用户入群。</div>
                    <a href="javascript:;" class="download_qrcode">下载二维码</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 群二维码模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <script>
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }
        let member_id = getUrlParam('id'); // 拿到接收到的成员id
        // 2020-02-20 start
        let nav_index = getUrlParam('nav_index'); // 拿到点击进来的nav_index
        // 2020-02-20 end
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer;

                // 2020-02-20 start
                // 返回
                $(".back").click(function () {
                    self.location.href = "customer-group.html?nav_index=" + nav_index
                })
                // 2020-02-20 end

                // 表格分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                });

                // 监听 搜索框 输入值变化
                $("#search_input").bind('input propertychange', function () {
                    let value = $(this).val()
                    // ajax 数据更新
                })

                // 查看群二维码
                $(".group_qrcode").click(function () {
                    $("#group_qrcode_modal").modal('show')
                })

            })
        })

    </script>
</body>

</html>